<template>
    <div style="height:80vh;width: 100%;">
        <a-row >
        <a-col style="text-align: right;">
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                        <a-menu-item key="mainData">主数据->主数据</a-menu-item>
                        <a-menu-item key="dtlData">明细表->明细表</a-menu-item>
                    </a-menu>
                </template>
                <a-button type="primary">添加配置</a-button>
            </a-dropdown>
        </a-col>
        <a-col>
            <a-collapse v-model:activeKey="activeKeys" @change="handleCollapseChange">
                <a-collapse-panel
                    v-for="panel in panels"
                    :key="panel.key"
                    :header="panel.header"
                >
                <a-button type="primary" @click="addTable(panel)">添加赋值</a-button>
                    <!-- <div > -->
                        <a-table
                        
                            :pagination="false"
                            :data-source="panel.tableData"
                            :columns="getColumns()"
                        />
                    <!-- </div> -->
                </a-collapse-panel>
            </a-collapse>
        </a-col>
    </a-row>
    </div>
    
</template>
<script lang="tsx" setup>
import { ref } from 'vue';
import type { MenuProps } from 'ant-design-vue';
import { Select } from 'ant-design-vue';
import { getFormJSON  } from '@/api/flow/index';
import { getFormDataJson} from '@/utils/common';
import {processInfo} from '@/store/modules/processInfo';

  interface Props {
      defaultData?: any;
    }
  const props = withDefaults(defineProps<Props>(), {
      defaultData: [{
        taskSubOperate:''
      }]
    });
  // 动态面板数据
  const panels = ref([]);
  // 当前展开的面板 key 数组
  const activeKeys = ref([]);
  //动态表格s
  const tables = ref([]);
  const formKeyList=ref<any>([]);
  const subFormKeyList=ref<any>([]);
  const proceInfoStore=processInfo();

  // 处理折叠面板状态变化
  const handleCollapseChange = (newKeys) => {
    activeKeys.value = newKeys;
  };
  const loadData=async()=>{
    console.log(props.defaultData.taskSubOperate,"111111111111111111")
    const formJson = await getFormJSON({ processkey: proceInfoStore.procInfo.id, taskid: '' });
    if (formJson.error == '200') {
      const mapJSON = JSON.parse(formJson.result.mapJson);
       const keys=getFormDataJson(mapJSON.list);
       subFormKeyList.value=keys.map((item)=>{
        return {value:item.id,label:item.label}
      })
    }


    const subFormJson = await getFormJSON({ processkey: props.defaultData.taskSubOperate[props.defaultData.taskSubOperate.length-1], taskid: '' });
    if (subFormJson.error == '200') {
      const mapJSON = JSON.parse(subFormJson.result.mapJson);
      const keys=getFormDataJson(mapJSON.list);
      formKeyList.value=keys.map((item)=>{
        return {value:item.id,label:item.label}
      })
    }
  }
  loadData()
  // 添加面板
  const handleMenuClick: MenuProps['onClick'] = e => {
    console.log('click', e);
    let panelTitle="";
    if(e.key==="mainData"){
      panelTitle="(主数据->主数据)"
    }
    else{
      panelTitle="(明细表->明细表)"
    }
    const newPanel = {
      key: e.key+panels.value.length + 1, // 唯一标识
      header: `传值配置 ${panels.value.length+1+panelTitle}`,
      content: `内容 ${panelTitle}`,
      tableData:[{ pKey: '', sKey: '' }]
    };
  
    panels.value.push(newPanel);
    // addTable(e.key+panels.value.length + 1);
    // 自动展开新面板
    activeKeys.value = [...activeKeys.value, newPanel.key];
  };
  // 添加新表格
  const addTable = (panel) => {
    panel.tableData.push({ pKey: '', sKey: '' })
  };
  const getColumns = () => {
    return [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: '20%',
        customRender: ({text, record, index}) => index + 1, 
    },
    {
      title: '子流程数据项及赋值逻辑(默认表单)',
      dataIndex: 'pKey',
      key: 'pKey',
      width: '40%',
      customRender: ({ record }) => (
        <Select
          value={record.pKey}
          style={{ width: '100%' }}
          options={formKeyList.value}
          onChange={(e) => handleCheckboxChange(record,"pKey", e)}
        />
      ),
    },
    {
      title: '父流程数据项(默认表单)',
      dataIndex: 'sKey',
      key: 'sKey',
      width: '40%',
      customRender: ({ record }) => (
        <Select
          value={record.sKey}
          style={{ width: '100%' }}
          options={subFormKeyList.value}
          onChange={(e) => handleCheckboxChange(record,"sKey", e)}
        />
      ),
    }
]
  }
  const handleCheckboxChange = (record:any,key: string, value: any) => {
    // 创建新数组更新状态
    console.log(record,"111111111111")
    record[key]=value;
    console.log(value,"key222222")
  };
  const onSubMit = async () => {
     return panels;
  };

  defineExpose({
    handleSubmit: onSubMit,
  });
</script>